<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代HTML示例页面</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="font-sans bg-light text-dark antialiased">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center">
                <a href="#" class="text-2xl font-bold text-primary flex items-center gap-2">
                    <i class="fa fa-code"></i>
                    <span>HTML学习</span>
                </a>
            </div>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="text-dark hover:text-primary transition-custom font-medium">首页</a>
                <a href="#features" class="text-dark hover:text-primary transition-custom font-medium">特性</a>
                <a href="#gallery" class="text-dark hover:text-primary transition-custom font-medium">展示</a>
                <a href="#contact" class="text-dark hover:text-primary transition-custom font-medium">联系</a>
                <a href="#" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-full transition-custom font-medium shadow-md hover:shadow-lg">
                    开始学习
                </a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button id="menuBtn" class="md:hidden text-dark hover:text-primary transition-custom">
                <i class="fa fa-bars text-2xl"></i>
            </button>
        </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="#home" class="block text-dark hover:text-primary transition-custom py-2">首页</a>
            <a href="#features" class="block text-dark hover:text-primary transition-custom py-2">特性</a>
            <a href="#gallery" class="block text-dark hover:text-primary transition-custom py-2">展示</a>
            <a href="#contact" class="block text-dark hover:text-primary transition-custom py-2">联系</a>
            <a href="#" class="block bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-full text-center transition-custom font-medium">
                开始学习
            </a>
        </div>
    </div>
</header>

<main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-28 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 space-y-6">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark">
                        学习<span class="text-primary">HTML</span>，<br>
                        构建精彩网页
                    </h1>
                    <p class="text-lg text-gray-600 max-w-lg">
                        掌握HTML基础，开启你的前端开发之旅。从简单的标签到复杂的页面结构，一步步成为网页开发高手。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <a href="#" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full transition-custom font-medium text-center shadow-lg hover:shadow-xl hover:-translate-y-1">
                            开始学习 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#" class="bg-white hover:bg-gray-50 text-dark border border-gray-200 px-8 py-3 rounded-full transition-custom font-medium text-center shadow-md hover:shadow-lg hover:-translate-y-1">
                            查看教程 <i class="fa fa-book ml-2"></i>
                        </a>
                    </div>
                    <div class="flex items-center gap-4 pt-6">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1002/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1003/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1004/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <div class="w-10 h-10 rounded-full bg-primary/10 text-primary border-2 border-white flex items-center justify-center text-sm font-medium">
                                500+
                            </div>
                        </div>
                        <p class="text-sm text-gray-600">已有超过500名学生加入学习</p>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform transition-custom hover:scale-[1.02] hover:shadow-3xl">
                        <img src="https://picsum.photos/id/0/600/400" alt="HTML代码示例" class="w-full h-auto">
                    </div>
                    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-primary/20 rounded-full blur-3xl -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 特性区域 -->
    <section id="features" class="py-20 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">HTML的核心特性</h2>
                <p class="text-gray-600 text-lg">了解HTML的核心功能和优势，为什么它是网页开发的基础</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 特性卡片1 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-code text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">简单易学</h3>
                    <p class="text-gray-600">HTML语法简单直观，标签语义化强，即使是编程新手也能快速上手。</p>
                </div>

                <!-- 特性卡片2 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-globe text-2xl text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台兼容</h3>
                    <p class="text-gray-600">所有现代浏览器都支持HTML，确保你的网页在任何设备上都能正常显示。</p>
                </div>

                <!-- 特性卡片3 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-mobile text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">响应式设计</h3>
                    <p class="text-gray-600">结合CSS，HTML可以轻松创建适应不同屏幕尺寸的响应式网页设计。</p>
                </div>

                <!-- 特性卡片4 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-puzzle-piece text-2xl text-yellow-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">易于扩展</h3>
                    <p class="text-gray-600">可以与CSS和JavaScript无缝集成，创建丰富交互性的现代网页应用。</p>
                </div>

                <!-- 特性卡片5 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-search text-2xl text-red-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">SEO友好</h3>
                    <p class="text-gray-600">语义化HTML标签有助于搜索引擎理解网页内容，提高网站排名。</p>
                </div>

                <!-- 特性卡片6 -->
                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-custom border border-gray-100 hover:-translate-y-1">
                    <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-code-fork text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">持续发展</h3>
                    <p class="text-gray-600">HTML5引入了许多新特性，并且标准仍在不断发展，适应新的需求。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 展示区域 -->
    <section id="gallery" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">HTML实例展示</h2>
                <p class="text-gray-600 text-lg">看看用HTML可以创建出什么样的精彩内容</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 展示卡片1 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transition-custom">
                    <img src="https://picsum.photos/id/180/600/400" alt="个人博客网站" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-80 group-hover:opacity-90 transition-custom"></div>
                    <div class="absolute bottom-0 left-0 p-6 text-white">
                        <h3 class="text-xl font-bold mb-2">个人博客网站</h3>
                        <p class="text-gray-200 mb-4">使用HTML5语义化标签构建的现代博客页面</p>
                        <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 bg-white px-4 py-2 rounded-lg transition-custom">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>

                <!-- 展示卡片2 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transition-custom">
                    <img src="https://picsum.photos/id/48/600/400" alt="电商网站" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-80 group-hover:opacity-90 transition-custom"></div>
                    <div class="absolute bottom-0 left-0 p-6 text-white">
                        <h3 class="text-xl font-bold mb-2">电商网站</h3>
                        <p class="text-gray-200 mb-4">使用HTML表格和表单构建的产品展示与订单系统</p>
                        <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 bg-white px-4 py-2 rounded-lg transition-custom">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>

                <!-- 展示卡片3 -->
                <div class="group relative overflow-hidden rounded-xl shadow-lg transition-custom">
                    <img src="https://picsum.photos/id/20/600/400" alt="作品集网站" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-80 group-hover:opacity-90 transition-custom"></div>
                    <div class="absolute bottom-0 left-0 p-6 text-white">
                        <h3 class="text-xl font-bold mb-2">作品集网站</h3>
                        <p class="text-gray-200 mb-4">使用HTML5和CSS Grid构建的响应式作品展示</p>
                        <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 bg-white px-4 py-2 rounded-lg transition-custom">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12">
                <a href="#" class="inline-flex items-center bg-white hover:bg-gray-50 text-primary border border-primary px-8 py-3 rounded-full transition-custom font-medium shadow-md hover:shadow-lg">
                    查看更多实例 <i class="fa fa-th-large ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 学习路径 -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">HTML学习路径</h2>
                <p class="text-gray-600 text-lg">从基础到进阶，一步步掌握HTML技能</p>
            </div>

            <div class="relative">
                <!-- 进度线 -->
                <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-gray-200 -translate-x-1/2"></div>

                <div class="space-y-12 relative">
                    <!-- 步骤1 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                            <h3 class="text-xl font-bold mb-2">HTML基础</h3>
                            <p class="text-gray-600">学习HTML基本结构、标签和属性，了解文档类型声明和基本语义。</p>
                            <a href="#" class="inline-block mt-4 text-primary hover:text-primary/80 font-medium transition-custom">
                                开始学习 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>

                        <div class="md:w-12 flex justify-center relative">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold shadow-lg z-10">1</div>
                        </div>

                        <div class="md:w-1/2 md:pl-12"></div>
                    </div>

                    <!-- 步骤2 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 md:text-right order-1 md:order-1"></div>

                        <div class="md:w-12 flex justify-center relative order-2">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold shadow-lg z-10">2</div>
                        </div>

                        <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-3 md:order-3">
                            <h3 class="text-xl font-bold mb-2">文本与链接</h3>
                            <p class="text-gray-600">掌握文本格式化标签、列表、超链接和锚点的使用方法。</p>
                            <a href="#" class="inline-block mt-4 text-primary hover:text-primary/80 font-medium transition-custom">
                                开始学习 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 步骤3 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                            <h3 class="text-xl font-bold mb-2">图像与媒体</h3>
                            <p class="text-gray-600">学习如何插入图像、音频和视频，以及响应式媒体的处理方法。</p>
                            <a href="#" class="inline-block mt-4 text-primary hover:text-primary/80 font-medium transition-custom">
                                开始学习 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>

                        <div class="md:w-12 flex justify-center relative">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold shadow-lg z-10">3</div>
                        </div>

                        <div class="md:w-1/2 md:pl-12"></div>
                    </div>

                    <!-- 步骤4 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 md:text-right order-1 md:order-1"></div>

                        <div class="md:w-12 flex justify-center relative order-2">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold shadow-lg z-10">4</div>
                        </div>

                        <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-3 md:order-3">
                            <h3 class="text-xl font-bold mb-2">表格与表单</h3>
                            <p class="text-gray-600">掌握表格结构和表单元素的使用，包括输入验证和表单提交。</p>
                            <a href="#" class="inline-block mt-4 text-primary hover:text-primary/80 font-medium transition-custom">
                                开始学习 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 步骤5 -->
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                            <h3 class="text-xl font-bold mb-2">HTML5新特性</h3>
                            <p class="text-gray-600">学习HTML5新增的语义化标签、API和功能，构建现代网页应用。</p>
                            <a href="#" class="inline-block mt-4 text-primary hover:text-primary/80 font-medium transition-custom">
                                开始学习 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>

                        <div class="md:w-12 flex justify-center relative">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold shadow-lg z-10">5</div>
                        </div>

                        <div class="md:w-1/2 md:pl-12"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系区域 -->
    <section id="contact" class="py-20 bg-gradient-to-br from-primary/5 to-indigo-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-6xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <div class="md:w-1/2 p-8 md:p-12 bg-primary text-white">
                        <h2 class="text-2xl md:text-3xl font-bold mb-6">联系我们</h2>
                        <p class="mb-8 opacity-90">如果你在学习HTML的过程中有任何问题，或者需要更多的学习资源，欢迎联系我们。</p>

                        <div class="space-y-6">
                            <div class="flex items-start gap-4">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium mb-1">电子邮件</h3>
                                    <p class="opacity-90">info@htmlexample.com</p>
                                </div>
                            </div>

                            <div class="flex items-start gap-4">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium mb-1">电话</h3>
                                    <p class="opacity-90">+86 123 4567 8910</p>
                                </div>
                            </div>

                            <div class="flex items-start gap-4">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium mb-1">地址</h3>
                                    <p class="opacity-90">北京市海淀区中关村大街1号</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-12">
                            <h3 class="font-medium mb-4">关注我们</h3>
                            <div class="flex gap-4">
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-custom">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-custom">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-custom">
                                    <i class="fa fa-github"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-custom">
                                    <i class="fa fa-youtube-play"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="md:w-1/2 p-8 md:p-12">
                        <form>
                            <div class="mb-6">
                                <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom" placeholder="请输入你的姓名">
                            </div>

                            <div class="mb-6">
                                <label for="email" class="block text-gray-700 font-medium mb-2">电子邮件</label>
                                <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom" placeholder="请输入你的邮箱">
                            </div>

                            <div class="mb-6">
                                <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                                <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom">
                                    <option value="">请选择咨询主题</option>
                                    <option value="learning">学习问题</option>
                                    <option value="resource">资源获取</option>
                                    <option value="feedback">意见反馈</option>
                                    <option value="other">其他问题</option>
                                </select>
                            </div>

                            <div class="mb-6">
                                <label for="message" class="block text-gray-700 font-medium mb-2">留言</label>
                                <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom" placeholder="请输入你的留言内容"></textarea>
                            </div>

                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-custom shadow-md hover:shadow-lg">
                                发送留言 <i class="fa fa-paper-plane ml-2"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div>
                <a href="#" class="text-2xl font-bold flex items-center gap-2 mb-4">
                    <i class="fa fa-code"></i>
                    <span>HTML学习</span>
                </a>
                <p class="text-gray-400 mb-6">专注于提供高质量的HTML学习资源，帮助初学者快速掌握网页开发技能。</p>
                <div class="flex gap-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-custom">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-custom">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-custom">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-custom">
                        <i class="fa fa-youtube-play text-xl"></i>
                    </a>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">快速链接</h3>
                <ul class="space-y-2">
                    <li><a href="#home" class="text-gray-400 hover:text-white transition-custom">首页</a></li>
                    <li><a href="#features" class="text-gray-400 hover:text-white transition-custom">特性</a></li>
                    <li><a href="#gallery" class="text-gray-400 hover:text-white transition-custom">展示</a></li>
                    <li><a href="#contact" class="text-gray-400 hover:text-white transition-custom">联系</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">关于我们</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">学习资源</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">HTML教程</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">实例代码</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">学习路径</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-custom">工具推荐</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">订阅更新</h3>
                <p class="text-gray-400 mb-4">订阅我们的 newsletter，获取最新的学习资源和教程。</p>
                <form class="flex">
                    <input type="email" placeholder="你的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                    <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-custom">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-400 text-sm">© 2023 HTML学习. 保留所有权利.</p>
            <div class="flex gap-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-custom">隐私政策</a>
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-custom">使用条款</a>
                <a href="#" class="text-gray-400 hover:text-white text-sm transition-custom">Cookie政策</a>
            </div>
        </div>
    </div>
</footer>

<!-- 回到顶部按钮 -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-custom opacity-0 invisible hover:scale-110">
    <i class="fa fa-arrow-up"></i>
</button>

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');

    menuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
        // 切换图标
        const icon = menuBtn.querySelector('i');
        if (icon.classList.contains('fa-bars')) {
            icon.classList.replace('fa-bars', 'fa-times');
        } else {
            icon.classList.replace('fa-times', 'fa-bars');
        }
    });

    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    let lastScrollTop = 0;

    window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollTop > 100) {
            navbar.classList.add('py-2', 'shadow-md');
            navbar.classList.remove('py-4', 'shadow-sm');
        } else {
            navbar.classList.add('py-4', 'shadow-sm');
            navbar.classList.remove('py-2', 'shadow-md');
        }

        lastScrollTop = scrollTop;
    });

    // 回到顶部按钮
    const backToTopBtn = document.getElementById('backToTop');

    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.remove('opacity-0', 'invisible');
            backToTopBtn.classList.add('opacity-100', 'visible');
        } else {
            backToTopBtn.classList.add('opacity-0', 'invisible');
            backToTopBtn.classList.remove('opacity-100', 'visible');
        }
    });

    backToTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    const icon = menuBtn.querySelector('i');
                    icon.classList.replace('fa-times', 'fa-bars');
                }

                // 滚动到目标位置
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
</script>
</body>
</html>
